import React, { Component } from 'react';
import './index.css';
import EventBus from '../../util/eventbus';

interface Iprops{
    children:any,
    keyId:string
}

interface Istate{
    active:boolean,
    clickMenuItem:(keyId:string) => void
}

class MenuItem extends Component <Iprops,Istate>{

    state = {
        active:false,
        clickMenuItem:(keyId:string) => {}
    }

    componentDidMount(){
        EventBus.$on('active',(params:string[],clickMenuItem:(keyId:string) => void) => {
            console.log(clickMenuItem,"clickMenuItem");
            let index = params.findIndex(item => item === this.props.keyId);
            this.setState({
                active:index!=-1,
                clickMenuItem
            })
        })
    }
    render() {
        let {active} = this.state;
        return (
            <div className={active?"active":''} onClick={this.menuFun}>
                {this.props.children}
            </div>
        );
    }

    menuFun = () => {
        this.state.clickMenuItem(this.props.keyId)
    }
}

export default MenuItem;